<template>
    <div class="login pos_rel">
        <template v-if="isError">
            <top-timer :back="false"/>
            <div class="center err_box">
                <img src="@/assets/img/error_icon.png" alt="">
                <p class="font_M font_40 col_333">启动失败</p>
                <p class="font_30 col_999 err_content">请检查网络设置和账号密码</p>
                <el-button type="primary" class="col_fff font_M">返回</el-button>
            </div>
            <top-tips/>
        </template>
        <template v-else>
            <top-timer :back="false" :beginTimer="false"/>
            <p class="login_title center font_M font_40 col_333">登录</p>
            <div class="form">
                <div class="flex">
                    <!--<el-input v-model="form.userCode" placeholder="账号"/>-->
                    <el-input class="phone" placeholder="账号" v-model="form.userCode" readonly="readonly"
                              data-layout="compact"
                              @focus="show($event,'01')" :class="keyboard.borderChecked==='01'?'input_checked':''"/>
                    <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                        :accept="accept" :input="input"/>
                </div>
                <div class="flex">
                    <!--<el-input class="flex1" v-model="form.kaptcha" placeholder="验证码"></el-input>-->
                    <el-input class="phone" placeholder="验证码" v-model="form.kaptcha" readonly="readonly"
                              data-layout="compact"
                              @focus="show($event,'02')" :class="keyboard.borderChecked==='02'?'input_checked':''"/>
                    <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                        :accept="accept" :input="input"/>
                    <div @click="getKaptcha()">
                        <img :src="imgSrc" alt="">
                    </div>
                </div>
                <!--<el-input type="password" v-model="form.password" placeholder="密码"/>-->
                <el-input class="phone" type="password" placeholder="密码" v-model="form.password" readonly="readonly"
                          data-layout="numeric"
                          @focus="show($event,'03')" :class="keyboard.borderChecked==='03'?'input_checked':''"/>
                <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                    :accept="accept" :input="input"/>
                <el-button type="primary" class="col_fff font_M" @click="login()">确认</el-button>
            </div>
            <top-tips :back="false" :beginTimer="false"/>
        </template>
    </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        isError: false,
        form: {
          userCode: '',
          password: '',
          kaptcha: '',
          tempToken: '',
        },
        imgSrc: '',
        keyboard:{
          visible: false,
          layout: 'compact',
          input: null,
          borderNum: '',
          borderChecked:'',
          options:{
            useKbEvents: false,
            preventClickEvent: false,
          }
        }
      }
    },
    created () {
      let cabinetId = localStorage.getItem('cabinetId')
      if (cabinetId) {
        this.$router.replace('/Home')
      } else {
        this.getKaptcha()
      }

    },
    methods: {
      accept (text) {
        this.hide()
      },

      show (e, borderNum) {
        this.keyboard.borderNum = borderNum
        this.keyboard.borderChecked = borderNum
        if (e.path[0].value !== '') {
          this.keyboard.borderNum = ''
        }
        this.input = e.target
        this.keyboard.layout = e.target.dataset.layout
        if (!this.keyboard.visible)
          this.keyboard.visible = true
      },
      hide () {
        this.keyboard.visible = false
        this.keyboard.borderNum = ''
      },
      login () {
        let self = this
        if (!self.form.userCode) {
          self.$alert('请输入账号', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        self.$axios.post('cabLoginRest/cabLogin', self.form)
          .then(res => {
            if (res.data.result) {
              let obj = res.data
              localStorage.setItem('cabinetId', obj.cabinetId)
              localStorage.setItem('cabinetName', obj.cabinetName)
              localStorage.setItem('cabinetCode', obj.cabinetCode)
              localStorage.setItem('address', obj.areaName + obj.address)
              self.$message.success('登录成功!')
              self.$emit('login')
              self.$router.replace('/Home')
            } else {
              self.$alert(res.data.msg, '登录错误', {
                confirmButtonText: '确定'
              })
              self.getKaptcha()
            }
          })
      },
      getKaptcha () {
        let self = this
        self.$axios.get('captchaRest/getTempToken').then(res => {
          if (res.data.result) {
            self.form.kaptcha = ''
            self.form.tempToken = res.data.msg
            self.imgSrc = self.$global.API + 'captchaRest/getValidateImg?tempToken=' + self.form.tempToken
          }
        })
      },
    }
  }
</script>

<style lang="scss">
    .login {
        .login_title {
            margin-top: 1rem;
            margin-bottom: 0.20rem;
        }
        .form {
            padding: 0 0.80rem;
            .flex {
                align-items: flex-end;
                position: relative;
                .border1 {
                    position: absolute;
                    height: 0.4rem;
                    border-left: 1px solid #000;
                    top: 0.8rem;
                    z-index: 99;
                    left: 0.3rem;
                }
            }
            .el-input {
                margin-top: 0.40rem;
                border-radius: 0.16rem;
                background-color: #ECF5FC;
                overflow: hidden;
                border: 1px solid transparent;
            }
            input {
                padding: 0 0.40rem;
                border: none;
                background-color: #ECF5FC;
                line-height: 1.20rem;
                height: 1.20rem;
                font-size: 0.36rem;
                &::placeholder {
                    color: #999999;
                }
            }
            .input_checked{
                border:1px solid #0a82ec;
            }
            img {
                width: 3.00rem;
                height: 1.20rem;
                background: rgba(255, 255, 255, 1);
                border-radius: 0.16rem;
                border: 0.02rem solid rgba(224, 224, 224, 1);
                margin-left: 0.40rem;
            }
        }
        .err_box {
            margin-top: 1.50rem;
            img {
                margin-bottom: 0.60rem;
            }
            .err_content {
                margin-top: 0.20rem;
            }
            button {
                width: calc(100% - 1.60rem);
                position: absolute;
                left: 0.80rem;
                right: 0.80rem;
                bottom: 1.00rem;
            }
        }
        button {
            width: 100%;
            height: 1.20rem;
            font-size: 0.50rem;
            border-radius: 0.70rem;
            background-color: #0A82EC;
            margin-top: 0.80rem;
        }
    }
</style>
